<template>
  <div class="list">
    <div class="order_model">
      <div class="title">订单统计</div>
      <div class="filter_model">
        <div class="filterLeft">
          <el-input
            size="small"
            class="filter-item"
            style="width: 200px"
            suffix-icon="el-icon-chaxun"
            v-model.trim="keyword.tenderer"
            placeholder="请输入负责人名称"
            clearable
            @clear="getList()"
            @keyup.native.enter="getList()"
          >
            <template slot="prefix">
              <span class="custom-prefix">负责人</span>
            </template>
          </el-input>
          <el-input
            size="small"
            class="filter-item"
            style="width: 200px"
            suffix-icon="el-icon-chaxun"
            v-model.trim="keyword.projectName"
            placeholder="请输入项目名称"
            clearable
            @clear="getList()"
            @keyup.native.enter="getList()"
          >
            <template slot="prefix">
              <span class="custom-prefix">项目名称</span>
            </template>
          </el-input>
          <el-input
            size="small"
            class="filter-item"
            style="width: 200px"
            suffix-icon="el-icon-chaxun"
            v-model.trim="keyword.InvitationCode"
            placeholder="请输入邀请码"
            clearable
            @clear="getList()"
            @keyup.native.enter="getList()"
          >
            <template slot="prefix">
              <span class="custom-prefix">邀请码</span>
            </template>
          </el-input>
          <el-select
            size="small"
            class="filter-item"
            style="width: 200px"
            v-model="keyword.Status"
            placeholder="请选择订单状态"
            clearable
            @change="getList()"
          >
            <el-option
              v-for="item in orderStatusArr"
              :key="item.Name"
              :label="item.Title"
              :value="item.Name"
            />
            <template slot="prefix">
              <span class="custom-prefix">订单状态</span>
            </template>
          </el-select>
          <el-date-picker
            class="filter-item"
            style="width: 240px"
            size="small"
            value-format="yyyy-MM-dd"
            v-model="keyword.inquiryTime"
            type="daterange"
            range-separator="-"
            start-placeholder="询单始期"
            end-placeholder="询单止期"
            clearable
            @change="getList()"
          />
          <span>
            <el-button
              style="
                background: linear-gradient(90deg, #2268e8 0%, #86b8ff 100%);
                border: none;
                margin-right: 12px;
              "
              type="primary"
              size="small"
              round
              @click="getList()"
              >查询</el-button
            >
          </span>
          <span>
            <el-button
              size="small"
              plain
              class="gollowOut-button"
              @click="clearDataEvent()"
              >重置</el-button
            >
          </span>
        </div>
        <div class="filterright">
          <el-button
            size="small"
            plain
            icon="el-icon-daochu2"
            class="gollowOut-button"
            :loading="loading"
            @click="upload()"
            >导出表格</el-button
          >
        </div>
      </div>
      <table-layout
        tableName="orderLists"
        :tableColumn="tableColumn"
        :tableData="tableData"
        :total="total"
        :listLoading="tableLoad"
        :operateColWidth="160"
        @row-click="rowClick"
        @pageChange="pageChange"
        @selectChange="selectChange"
      >
        <!-- :isShowSerial="false"
        :isShowOperate="false"
        :isShowCustomColumn="false" -->
        <template v-slot:Status="{ row }">
          <el-tag :type="row.Status === 1 ? 'success' : 'danger'" size="small">
            {{ row.Status === 1 ? '已出函' : '已退费' }}</el-tag
          >
        </template>
      </table-layout>
    </div>
  </div>
</template>

<script>
import orderListsCol from '@/tableColumn/orderListsCol'
export default {
  name: 'list',
  data () {
    return {
      loading: false,
      tableColumn: orderListsCol,
      tableData: [],
      tableLoad: false,
      rowData: null,
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        order: 'ID desc',
        where: '1=1'
      },
      keyword: {
        tenderer: '',
        projectName: '',
        InvitationCode: '',
        Status: '',
        inquiryTime: []
      },
      orderStatusArr: [
        {
          Name: '1',
          Title: '已出函'
        },
        {
          Name: '2',
          Title: '已退费'
        }
      ]
    }
  },
  created () {
    setTimeout(() => {
      this.tableData = [
        {
          letterTime: '2018-09-06 15:34:00',
          orderNumber: 'BXT240614101851274579228',
          platform: 'BXT',
          tenderer: '广东省城中建设有限公司',
          projectName: '项目名称文化街区前山河两岸配套',
          OpenBidTime: '2018-09-06 15:34:00',
          Order: {
            GuaMoney: 50000
          },
          GuaranteeMoney: 1500,
          InvitationCode: '9650un',
          Status: 1
        },
        {
          letterTime: '2018-09-06 15:34:00',
          orderNumber: 'BXT240614101851274579228',
          platform: 'BXT',
          tenderer: '广东省城中建设有限公司',
          projectName: '项目名称文化街区前山河两岸配套',
          OpenBidTime: '2018-09-06 15:34:00',
          Order: {
            GuaMoney: 50000
          },
          GuaranteeMoney: 1500,
          InvitationCode: '9650un',
          Status: 2
        }
      ]
    }, 1000)
  },
  methods: {
    getList () {
      console.log('获取数据', this.keyword)
    },
    upload () {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        console.log('导出表格')
      }, 2000)
    },
    rowClick (e) {
      this.rowData = e
    },
    pageChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    selectChange (val) {
      this.selIds = val && val.length ? val.map(key => key.ID) : []
    },
    clearDataEvent () {
      this.keyword = this.$options.data.call(this).keyword
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #1c1f23;
  }
  .order_model {
    padding: 24px;
    background-color: #fff;
    border-radius: 12px 12px 12px 12px;
    .filter_model {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 24px;
      .filterLeft {
        .filter-item {
          line-height: 33px;
          color: #999999;
          margin-bottom: 16px;
          margin-right: 12px;
        }

        :deep(.el-input--small .el-input__inner) {
          padding-left: 65px;
        }
      }
      /* 渠道管理系统----添加样式 */
      .gollowOut-button {
        color: #0077ff !important;
        background: #fff !important;
        border-color: #0077ff !important;
        border-radius: 20px;
      }
      .gollowOut-button:hover {
        color: #0077ff !important;
        background: #fff !important;
        border-color: #0077ff !important;
        border-radius: 20px;
      }
    }
  }
}
</style>
